<script type="text/javascript">
$(function(){
	var pg = App.base.appInstPicker.ui , pp = pg.params || {}
		, bd = pg.children('.body'), hd = bd.children('.head')
		, ft = bd.children('.foot'), gd = bd.find('.grid')
		, envs = Cache.base.env(App.code), slo = {};

	var frm = {
		env: hd.seek('env'),
		key: hd.seek('key'),
		find: hd.seek('find'),
		ok: ft.seek('ok'),
		close: ft.seek('close')
	};
	frm.env.mac('combo', {
		width: 80,
		boxTop: 34,
		boxWidth: 81,
		readOnly: 1,
		keyField: 'k',
		displayField: 'v',
		data: envs
	}).val(pp.env);

	gd.mac('grid', {
		key: 'id',
		cols : [{
			field: 'id', width: 24,
			title: pp.multi?'<input type="checkbox" name="all" />':'',
			render: function(r) {
				var a = $('<input type="' + (pp.multi? 'checkbox':'radio')
					+ '" name="keys" value="' + r.id + '"/>');
				a.change(function(){
					var k = a.attr('value');
					if (a.is(':checked')) {
						slo[k] = gd.data[k];
					} else {
						delete slo[k];
					}
				});
				return a;
			}
		}, {
			field: 'no', title: '实例号', width: 80
		},{
			field: 'ip', title: '服务器IP', width: 120
		},{
			field: 'port', title: '应用端口', width: 80
		},{
			field: 'user', title: '用户', width: 80
		},{
			field: 'env', title: '环境', width: 80,
			render: function(r) {
				return r.server.env;
			}
		},{
			field: 'status', title: '状态', width: 140,
			render: function(r){
				return Cache.base.app.inst.status[r.status];
			}
		}],
		loader: {
			url: App.ctx + '/app/inst/list.do',
			params: { pageNo: 1, pageSize: 50, appId: pp.appId, env: pp.env },
			autoLoad: true
		},
		pagerLength: 50,
		afterLoad: function(dd, po, me){
			me.find('.tr').each(function(i, tr){
				$(tr).dblclick(function(){
					frm.ok.click();
				});
			});
			if (pp.multi) {
				me.seek('all').removeAttr('checked');
				me.seek('keys').each(function(i, n){
					var a = $(n), k = a.attr('value');
					if (slo[k]) {
						a.attr('checked', 'checked');
					} else {
						a.removeAttr('checked');
					}
				});
			}
		}
	});
	
	gd.seek('all').click(function(){
		var c = $(this).prop('checked');
		gd.seek('keys').prop('checked', c).each(function(i, a){
			var k = $(a).attr('value');
			if (k) {
				slo[k] = gd.data[k];
			}
		});
	});
	frm.ok.click(function(){
		pg.close();
		if (pp.multi) {
			pg.callback(slo);
		} else {
			var sl = gd.selected || [];
			if (sl.length) {
				var k = $(sl[0]).attr('name');
				pg.callback(gd.data[k]);
			}
		}
	});
	function find(e){
		gd.load({ env: frm.env.val(), key: frm.key.val() });
	}
	frm.key.keydown(function(e) {
		if (e.keyCode == 13) {
			find(e);
		}
	});
	frm.find.click(find);
	frm.close.click(pg.close);

	function adjust(){
		var h = pg.height();
		gd.parent().height(h - pg.children('.head').height() - ft.height() - 80);
		gd.adjust();
	}
	adjust();
});
</script>
<div class="head">
	<span class="fl">环境：</span>
	<div class="combo fl" name="env"></div>
	<span>&nbsp;&nbsp;&nbsp;&nbsp;关键字：</span>
	<input name="key" placeholder="实例编号、名称或IP地址" />
	<button name="find">查找</button>
</div>
<div class="body">
	<div class="grid"></div>
</div>
<div class="foot">
	<button name="ok">确定</button>
	<button name="close">取消</button>
</div>